<template>
  <view class="floor">

    <view class="home_nav" v-if="floor.mark === 'ENTRY'">
      <view v-for="(item, index) in floor.children" :key="index" @click="activityJump(item)">
        <image :src="item.icon" alt="" />
        <text>{{ item.title }}</text>
      </view>
    </view>

    <view v-if="floor.mark === 'BANNER'">
      <zones :data="floor"> </zones>
    </view>

    <view v-if="floor.mark === 'FLOOR_SECKILL'&&floor.promotion">
      <view class="home_seckill" v-if="floor.promotion">
        <seckill :data="floor">
        </seckill>
      </view>
    </view>

    <view v-if="floor.mark === 'FLOOR_PINTUAN'&&floor.promotion">
      <view class="home_seckill" v-if="floor.promotion">
        <pintuan :data="floor">
        </pintuan>
      </view>
    </view>

    <view v-if="floor.mark === 'FLOOR_BARGAIN'&&floor.promotion">
      <view class="home_bargain">
        <bargain :data="floor"> </bargain>
      </view>
    </view>

    <view class="home_group" v-if="floor.mark === 'FLOOR_PORTFOLIO'">
      <group :data="floor"> </group>
    </view>

    <view class="home_coupon" v-if="floor.mark === 'COUPON'">
      <coupon :data="floor"></coupon>
    </view>

    <view v-if="floor.mark === 'FLOOR_TYPICAL'&&floor.promotion">
      <view class="home_typical">
        <typical :data="floor"> </typical>
      </view>
    </view>

    <view v-if="floor.mark === 'FLOOR_COMMON'&&floor.promotion">
      <view class="home_common">
        <common :data="floor"> </common>
      </view>
    </view>

    <view v-if="floor.mark === 'FLOOR_NEST'&&floor.children">
      <view class="home_nest">
        <common :data="common_type1.data" :half="true" v-if="common_type1.ef"> </common>
        <common :data="common_type2.data" :half="true" v-if="common_type2.ef"> </common>
      </view>
    </view>

    <movable-area v-if="floor.mark === 'FLOAT'">
      <movable-view direction="vertical" y="700">
        <image :src="staticUrl()+'/new/mark_coupon.png'" @click="activityJump(floor.children[0])">
        </image>
      </movable-view>
    </movable-area>

    <view class="home_dedicated" v-if="floor.mark === 'PROMOTION_COMMON'&&floor.promotion">
      <activity :data="floor" :index="index"> </activity>
    </view>

    <view class="home_manufactor" v-if="floor.mark === 'FLOOR_BRAND'&&floor.promotion">
      <manufactor :data="floor"> </manufactor>
    </view>

  </view>
</template>

<script>
import zones from '@/components/home/zones.vue'
import seckill from '@/components/home/seckill.vue'
import pintuan from '@/components/home/pintuan.vue'
import bargain from '@/components/home/bargain.vue'
import coupon from '@/components/home/coupon.vue'
import activity from '@/components/home/activity.vue'
import manufactor from '@/components/home/manufactor.vue'
import group from '@/components/home/group.vue'
import common from '@/components/home/common.vue'
import typical from '@/components/home/typical.vue'
import { pageSkipping } from '@/utils/util'

export default {
  components: { zones, seckill, pintuan, bargain, coupon, activity, manufactor, group, common, typical, },
  props: {
    floor: {
      type: Object,
      default: () => { }
    },
    index: {
      type: Number,
      default: 0,
    }
  },
  data () {
    return {
      common_type1: {
        ef: false,
        data: '',
      },
      common_type2: {
        ef: false,
        data: '',
      },
    }
  },
  created () {
    if (this.floor.mark === 'FLOOR_NEST' && this.floor.children) {
      let a = this.floor.children[0]
      let b = this.floor.children[1]
      if (a.mark === 'FLOOR_COMMON' && a.promotion) {
        if (a.dataType === 'DEDICATED' ||
          a.dataType === 'DEDICATED_REDUCE' ||
          a.dataType === 'BARGAIN' ||
          a.dataType === 'BARGAIN_ZONE' ||
          a.dataType === 'FULL_DISCOUNT' ||
          a.dataType === 'FULL_DISCOUNT_ZONE' ||
          a.dataType === 'FULL_REDUCTION' ||
          a.dataType === 'FULL_REDUCTION_ZONE' ||
          a.dataType === 'FREE_SHIPPING'
        ) {
          this.common_type1.ef = true
          this.common_type1.data = a
        }
      }
      if (b) return
      if (b.mark === 'FLOOR_COMMON' && b.promotion) {
        if (b.dataType === 'DEDICATED' ||
          b.dataType === 'DEDICATED_REDUCE' ||
          b.dataType === 'BARGAIN' ||
          b.dataType === 'BARGAIN_ZONE' ||
          b.dataType === 'FULL_DISCOUNT' ||
          b.dataType === 'FULL_DISCOUNT_ZONE' ||
          b.dataType === 'FULL_REDUCTION' ||
          b.dataType === 'FULL_REDUCTION_ZONE' ||
          b.dataType === 'FREE_SHIPPING'
        ) {
          this.common_type2.ef = true
          this.common_type2.data = b
        }
      }

    }
  },
  methods: {
    // 活动 跳转
    activityJump (val) {
      pageSkipping(val.path, val.param || { title: val.title })
    }
  }
}
</script>

<style lang="scss" scoped>
.floor {
  position: relative;
  z-index: 1;
  margin: 0 25rpx;
  margin-bottom: 20rpx;
}
.home_nav {
  width: 702rpx;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  font-size: 24rpx;
  background: #fff;
  padding-top: 21rpx;
  border-radius: 24rpx;

  view {
    width: 20%;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    margin-bottom: 20rpx;
  }

  image {
    width: 84rpx;
    height: 84rpx;
    margin-bottom: 5rpx;
  }

  text {
    line-height: 44rpx;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

movable-area {
  width: 150rpx;
  height: 60vh;
  position: fixed;
  right: -150rpx;
  bottom: 10vh;
  movable-view {
    width: 142rpx;
    height: 142rpx;
    position: relative;
    image {
      width: 100%;
      height: 100%;
      position: absolute;
      left: -150rpx;
    }
  }
}
.home_nest {
  width: 702rpx;
  display: flex;
  justify-content: space-between;
}
</style>
